<template>
	<view>
		<view class="panel" v-if="data">
			<view class="card card-1">
				<view class="level u-flex">
					<image :src="vuex_user.levelLogo" v-if="vuex_user.levelLogo"></image>
					<text v-if="vuex_user.levelName">您当前的等级为{{vuex_user.levelName}}会员</text>
					<text v-else>您还是不是会员，成为会员后可享更多权益</text>
				</view>
			</view>
			<view class="title">会员权限福利</view>
			<view class="card card-2">
				<view class="text">{{data.remark || '暂无'}}</view>
			</view>
			
			<view class="more" @click="jump('/pages/college/upgrade')">获取更多权益</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"college-upgrade",
		data() {
			return {
				data:{}
			};
		},
		methods:{
			
		},
		created() {
			this.$store.dispatch('userInfo',this).then(res=>{
				let id = res.levelId
				this.$u.api.level().then(res=>{
					const data = res.filter(item=>item.id === id)
					this.data = data[0]
					console.log(data[0])
				})
			})
			
		}
	}
</script>

<style lang="scss">
	.panel{padding: 20rpx 60rpx 0;
		.title{font-size: 32rpx;font-weight: bold;padding: 22rpx 0;}
		.card{padding: 20rpx;background-color: #3D383C;border-radius: 20rpx;min-height: 200rpx;color: #fff;
			.text{font-weight: bold;text-align: justify;font-size: 28rpx;}
		}
		.card-1{
			.level{
				padding: 14rpx 0;
				image{width: 90rpx;height: 52rpx;display: block;flex-shrink: 0;margin-right: 20rpx;}
				text{font-size: 26rpx;}
			}
		}
		
		.more{
			background: linear-gradient(90deg, #DCA54F 0%, #BE7B15 100%);height: 70rpx;font-weight: bold;font-size: 30rpx;color: #fff;text-align: center;line-height: 70rpx;border-radius: 100rpx;
			margin-top: 200rpx;
		}
	}
</style>
